<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
div.popup {
	position:absolute;
	width:150px;
	height:36px;
	background-color:#FFF;
 	border:1px solid #CCC; 
	border-radius:10px;
	box-shadow:3px 3px 1px #DDD;
	padding:4px;
}

div.popup_title {
	width:100%;
	cursor:Move;
/* 	text-align:center; */
	font-weight:bold;
	border-bottom:1px solid #ccc;
	margin-bottom:5px;
}
</style>
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화
		
		var ctgr = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
		var cfg = {
		    Chart : {
				Animation : true,
		        PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BackgroundColor:{
					LinearGradient : [0,0,100,500],
					Stops : [
						[0, "#D7E1F3"],
						[1, "#FFFFFF"]
					]
				},
				BorderColor : "#84888B",
				Type : "spline",
				marginRight: 10
		    },
		    title: {
                text: 'Live random data'
            },
            XAxis : {
	            Labels:{
	 				Formatter:function(){
	 					var size = ctgr.length;
	            		var idx = this.value % size;
	                    return ctgr[idx];
	 				}
	 			}
		    },
		    YAxis : {
		    	Max:10,
		    	Min:0
		    },
            
            legend: {
                enabled: false
            },
            ToolTip: {
		    	formatter: function() {
		    		var size = ctgr.length;
            		var idx = this.point.x % size;
            		return ctgr[idx] + "<br>" + "Value : " + this.point.y;
		    	}
		    },
		    plotOptions: {
                series: {
                	cursor: 'pointer',
                    point: {
                    	events: {
                            click: function (e) {
                            	console.log("click");
                            }
                    	}
                    }
                }
		    }
		};
		
		myChart.SetOptions(cfg);
		
		var data = [{ Data : [ 5, 9, 7, 2, 4, 1, 3, 8 ] }];
		
		myChart.SetSeriesOptions(data);
		myChart.Draw();
	});
	
	var posX, posY;
	$(document).bind('mousedown',function(e){
		posX = e.pageX - 20;
		posY = e.pageY - 10;
	});
	

	var img_L = 0;
	var img_T = 0;
	var targetObj;
	
	function getLeft(o){
	     return parseInt(o.style.left.replace('px', ''));
	}
	function getTop(o){
	     return parseInt(o.style.top.replace('px', ''));
	}

	function startDrag(e, obj) {
		targetObj = obj;
		var e_obj = window.event ? window.event : e;
		img_L = getLeft(obj) - e_obj.clientX;
		img_T = getTop(obj) - e_obj.clientY;

		document.onmousemove = moveDrag;
		document.onmouseup = stopDrag;
		if (e_obj.preventDefault)
			e_obj.preventDefault();
	}
	
	// 드래그 멈추기
	function stopDrag(){
	     document.onmousemove = null;
	     document.onmouseup = null;
	}
	
	// 이미지 움직이기
	function moveDrag(e){
	     var e_obj = window.event? window.event : e;
	     var dmvx = parseInt(e_obj.clientX + img_L);
	     var dmvy = parseInt(e_obj.clientY + img_T);
	     targetObj.style.left = dmvx +"px";
	     targetObj.style.top = dmvy +"px";
	     return false;
	}
	
	function hide(obj) {
		obj.parentNode.style.display="none";
	}

	function myChart_OnPointClick(Index, X, Y) {
		// 		console.log(Index + "번째 그래프의 " + X + "번 값은 " + Y + "입니다.");
		var layer = "<div class='popup' style='left:" + posX + "px; top:" + posY + "px;' onmousedown='startDrag(event, this)'>"
				+ "<div style='float:right; cursor:pointer' onmousedown='hide(this)'>&#215;</div>"
				+ "<div class='popup_title'>"
				+ X + " 번째</div>" + "값 : " + Y + "</div>";

		$('#main').append(layer);
	}
</script>
<title>Clickable Points 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>
	<div id="title">Clickable Points 예제</div>
	<div id="desc">
		포인트 클릭시 이동과 닫기가 가능한 레이어 팝업이 뜬다.
	</div>

	<div id="functionArea">
		포인트 클릭시 신규 레이어를 생성하고, 레이어의 정보를 토대로 이동이 가능한 스크립트를 추가
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "100%", "400px");
		</script>
	</div>
</div>
</body>
</html>